<template>

    <div class="app-container">

        <h2 style="text-align: center;">发布新课程</h2>

        <el-steps
            :active="1"
            process-status="wait"
            align-center
            style="margin-bottom: 40px;"
        >
            <el-step title="填写课程基本信息" />
            <el-step title="创建课程大纲" />
            <el-step title="提交审核" />
        </el-steps>

        <el-form label-width="120px">

            <el-form-item label="课程标题">
                <el-input
                    v-model="courseInfo.title"
                    placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写"
                />
            </el-form-item>

            <!-- 所属分类 TODO -->
            <!-- 所属分类：级联下拉列表 -->
            <!-- 一级分类 -->
            <el-form-item label="课程类别">
                <el-select
                    clearable
                    @change="subjectLevelOneChanged"
                    v-model="courseInfo.subjectParentId"
                    placeholder="请选择"
                >
                    <el-option
                        v-for="subject in subjectNestedList"
                        :key="subject.id"
                        :label="subject.name"
                        :value="subject.id"
                    />
                </el-select>
                <!-- 二级分类 -->
                <el-select
                    clearable
                    v-model="courseInfo.subjectId"
                    placeholder="请选择"
                >
                    <el-option
                        v-for="subject in subSubjectList"
                        :key="subject.id"
                        :label="subject.name"
                        :value="subject.id"
                    />
                </el-select>
            </el-form-item>

            <!-- 课程讲师 TODO -->
            <!-- 课程讲师 -->
            <el-form-item label="课程讲师">
                <el-select
                    v-model="courseInfo.teacherId"
                    placeholder="请选择"
                >
                    <el-option
                        v-for="teacher in teacherList"
                        :key="teacher.id"
                        :label="teacher.name"
                        :value="teacher.id"
                    />
                </el-select>
            </el-form-item>

            <el-form-item label="总课时">
                <el-input-number
                    :min="0"
                    v-model="courseInfo.lessonNum"
                    controls-position="right"
                    placeholder="请填写课程的总课时数"
                />
            </el-form-item>

            <!-- 课程简介 TODO -->
            <!-- 课程简介-->
            <el-form-item label="课程简介">
                <tinymce
                    :height="300"
                    v-model="courseInfo.description"
                />
            </el-form-item>

            <!-- 课程封面 TODO -->
            <!-- 课程封面-->
            <el-form-item label="课程封面">

                <el-upload
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    :action="BASE_API+'/eduoss/oss/fileupload'"
                    class="avatar-uploader"
                >
                    <img :src="courseInfo.cover">
                </el-upload>

            </el-form-item>

            <el-form-item label="课程价格">
                <el-input-number
                    :min="0"
                    v-model="courseInfo.price"
                    controls-position="right"
                    placeholder="免费课程请设置为0元"
                /> 元
            </el-form-item>

            <el-form-item>
                <el-button
                    :disabled="saveBtnDisabled"
                    type="primary"
                    @click="next"
                >保存并下一步</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>


<script>
import course from '@/api/course/course.js'
import subject from '@/api/subject/subject.js'
import Tinymce from '@/components/Tinymce'

export default {
    components: { Tinymce },
    data() {
        return {
            saveBtnDisabled: false, // 是否禁用提交按钮
            // 课程对象
            courseInfo: {
                title: '',
                subjectId: '',
                teacherId: '',
                lessonNum: 0,
                description: '',
                cover: '/static/course/02.jpg',
                price: 0
            },
            // 所有的讲师
            teacherList: [],
            subjectNestedList: [], // 一级分类列表
            subSubjectList: [], // 二级分类列表
            BASE_API: process.env.BASE_API, // 接口API地址
            courseid: ''
        }
    },
    created() {
        // 初始化
        this.getListTeacher()
        this.init()
    },
    methods: {
        // 根据编号查询
        async byid() {
            await this.getparentsubjectlist()
            course
                .byid(this.courseid)
                .then(response => {
                    // 成功
                    if (response.success === true) {
                        // 一级分类
                        this.courseInfo = response.data.courseInfoVo

                        // 二级分类
                        // 在所有集合中找到选中的
                        for (
                            let i = 0;
                            i < this.subjectNestedList.length;
                            i++
                        ) {
                            if (
                                this.subjectNestedList[i].id ===
                                this.courseInfo.subjectParentId
                            ) {
                                // 把选中的二级分类放进select选择框
                                this.subSubjectList = this.subjectNestedList[
                                    i
                                ].children
                                // console.log(this.subSubjectList)
                            }
                        }
                    }
                })
                .catch(function(reason) {
                    alert('查询课程错误')
                })
        },
        // 初始化判断有没有courseid值 看需不需要回显
        init() {
            if (this.$route.params && this.$route.params.id) {
                this.courseid = this.$route.params.id
                this.byid(this.courseid)
            } else {
                this.getparentsubjectlist()
                this.courseid = ''
                this.courseInfo = {
                    title: '',
                    subjectId: '',
                    teacherId: '',
                    lessonNum: 0,
                    description: '',
                    cover: '/static/course/02.jpg',
                    price: 0
                }
            }
        },
        // 上传之前
        handleAvatarSuccess(res, file) {
            console.log(res) // 上传响应
            console.log(URL.createObjectURL(file.raw)) // base64编码
            this.courseInfo.cover = res.data.url
        },
        // 上传之后
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg'
            const isLt2M = file.size / 1024 / 1024 < 2

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!')
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!')
            }
            return isJPG && isLt2M
        },
        // 查询所有的一级分类
        getparentsubjectlist() {
            subject
                .getTreeList()
                .then(response => {
                    // 成功
                    if (response.success === true) {
                        this.subjectNestedList = response.data.list
                    }
                })
                .catch(function(reason) {
                    alert('分类错误错误')
                })
        },
        // 改变事件 一旦一级分类发生改变就修改二级分类
        subjectLevelOneChanged(value) {
            // 修改一级分类时清空二级分类
            this.courseInfo.subjectId = ''
            // console.log(value)
            // 判断是不是选中了
            if (value !== '') {
                // 在所有集合中找到选中的
                for (let i = 0; i < this.subjectNestedList.length; i++) {
                    if (this.subjectNestedList[i].id === value) {
                        // 把选中的二级分类放进select选择框
                        this.subSubjectList = this.subjectNestedList[i].children
                        // console.log(this.subSubjectList)
                    }
                }
            } else if (value === '') {
                // 如果取消选中了
                this.subSubjectList = []
                this.courseInfo.subjectId = ''
            }
        },
        // 查询所有 的讲师
        getListTeacher() {
            course
                .getListTeacher()
                .then(response => {
                    // 成功
                    if (response.success === true) {
                        this.teacherList = response.data.teacherList
                    }
                })
                .catch(function(reason) {
                    alert('添加课程错误')
                })
        },
        next() {
            // 判断是不是修改
            this.saveBtnDisabled = true
            if (!this.courseInfo.id) {
                // console.log('next')
                // 添加课程
                course
                    .save(this.courseInfo)
                    .then(response => {
                        // 成功
                        if (response.success === true) {
                            this.$message({
                                type: 'info',
                                message: '添加课程信息成功'
                            })
                            // 跳转
                            this.$router.push({
                                path:
                                    '/course/chapter/' + response.data.courseid
                            })
                        }
                    })
                    .catch(function(reason) {
                        alert('添加课程错误')
                    })
            } else {
                // 修改课程
                course
                    .updateCourse(this.courseInfo)
                    .then(response => {
                        // 成功
                        if (response.success === true) {
                            this.$message({
                                type: 'info',
                                message: '修改课程信息成功'
                            })
                            // 跳转
                            this.$router.push({
                                path:
                                    '/course/chapter/' + response.data.courseid
                            })
                        }
                    })
                    .catch(function(reason) {
                        alert('添加课程错误')
                    })
            }
        }
    },

    watch: {
        $route(to, form) {
            this.init()
        }
    }
}
</script>

<style scoped>
.tinymce-container {
    line-height: 29px;
}
</style>

